import React from 'react';
import { Card, Typography } from 'antd';
import AttachmentPreview from '../components/AttachmentPreview';

const { Title } = Typography;

const AttachmentTest = () => {
  // 模拟附件数据
  const mockAttachments = [
    {
      id: 1,
      file_name: 'test-image.jpg',
      original_name: '测试图片.jpg',
      file_type: 'image',
      file_size: 1024000,
      file_url: 'https://picsum.photos/800/600',
      mime_type: 'image/jpeg',
      width: 800,
      height: 600
    },
    {
      id: 2,
      file_name: 'test-document.pdf',
      original_name: '测试文档.pdf',
      file_type: 'document',
      file_size: 2048000,
      file_url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
      mime_type: 'application/pdf'
    },
    {
      id: 3,
      file_name: 'test-video.mp4',
      original_name: '测试视频.mp4',
      file_type: 'video',
      file_size: 10240000,
      file_url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
      mime_type: 'video/mp4',
      width: 1280,
      height: 720,
      duration: 30
    }
  ];

  const handleDeleteAttachment = (attachmentId) => {
    console.log('删除附件:', attachmentId);
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <Card>
        <Title level={2}>附件预览测试页面</Title>
        
        <AttachmentPreview 
          attachments={mockAttachments}
          onDelete={handleDeleteAttachment}
          showActions={true}
        />
      </Card>
    </div>
  );
};

export default AttachmentTest;